<template>
  <div class="app">
    <h1>My Element Components Demo</h1>
    <my-button type="primary" @click="handleClick">Primary Button</my-button>
    <my-button type="success" special>Special Success Button</my-button>
    <my-button type="warning" size="small">Small Warning Button</my-button>
    <my-button type="danger" loading>Loading Button</my-button>
  </div>
</template>

<script setup lang="ts">
import { MyButton } from './components'

const handleClick = () => {
  console.log('Button clicked!')
}
</script>

<style scoped>
.app {
  padding: 2rem;
  display: flex;
  gap: 1rem;
  flex-direction: column;
}
</style>